<template>
  <div>
    <div id="month-task-bar" style="height:400px"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import Chart from '@/module/ana-charts'
  export default {
    data () {
      return {
        defineTaskList: [
          {
            key: '超算',
            value: 8
          },
          {
            key: '通用计算',
            value: 45
          },
          {
            key: 'AI训练',
            value: 28
          }
        ]
      }
    },
    computed: {
      options () {
        return {
          title: {
            text: ''
          },
          grid: {
            right: '2%'
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#33317E'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#33317E' // 线条颜色
              }
            },
            axisLabel: {
              color: '#333333'
            }
          },
          yAxis: {
            name: '数量(个)',
            nameTextStyle: {
              color: '#333333'
            },
            axisLine: {
              lineStyle: {
                color: '#33317E'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#33317E' // 线条颜色
              }
            },
            axisLabel: {
              color: '#333333'
            },
            itemStyle: {
              color: '#333333'
            }
          },
          tooltip: {
            formatter (v) {
              const val = v[0].name.split(',')
              return `${val[0]} (${v[0].value})`
            }
          },
          series: [{
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: [4, 4, 0, 0],
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#33317E' },
                    { offset: 1, color: '#45116D' }
                  ]
                )
              }
            }
          }]
        }
      }
    },
    mounted () {
      const myChart = Chart.bar('#month-task-bar', this.defineTaskList, {})
      myChart.echart.setOption(this.options)
    }
  }
</script>

<style lang="scss" scoped>
</style>
